{% extends base %}

{% block head %}
<script type="text/javascript" src="/static/lib/utf.js"></script>
{% end %}
{% block body %}

<div class="card">
    {% set title = "URL编解码" %}
    {% include "tools/base_title.html" %}
        
    <div class="col-md-12">
        <label>输入</label>
        <textarea id="input" class="col-md-12" rows=5></textarea>
    </div>

    <div class="col-md-12">
        <button onclick="doEncode()">Encode</button>
        <button onclick="doDecode()">Decode</button>
    </div>
</div>

<div class="col-md-12 card">
    <h1 class="card-title">encodeURI</h1>
    <textarea id="encodeURIText" class="col-md-12" rows=5></textarea>
</div>

<div class="col-md-12 card">
    <h1 class="card-title">encodeURIComponent</h1>
    <textarea id="encodeURIComponentText" class="col-md-12" rows=5></textarea>
</div>


<script>
function doEncode() {
    var text = $("#input").val();
    $("#encodeURIText").val(encodeURI(text));
    $("#encodeURIComponentText").val(encodeURIComponent(text))
}

function doDecode() {
    var text = $("#input").val();
    var chars = decodeURI(text);
    $("#encodeURIText").val(chars);
    $("#encodeURIComponentText").val(decodeURIComponent(text));
}
</script>
{% end %}